<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Fruit REST service</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css"/>
    <!-- Load AngularJS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module("FruitManagement", []);

      //Controller Part
      app.controller("FruitManagementController", function ($scope, $http) {

        //Initialize page with default data which is blank in this example
        $scope.fruits = [];

        $scope.form = {
          name: "",
          color: ""
        };

        $scope.searchData = {
          name: "",
          color: ""
        };

        //HTTP POST methods for add fruits
        $scope.add = function () {
          var data = { "name": $scope.form.name, "color": $scope.form.color };

          $http({
            method: "POST",
            url: '/fruits',
            data: angular.toJson(data),
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(_success, _error);
        };

        //HTTP GET methods for search fruits
        $scope.search = function () {
          var name = $scope.searchData.name;
          var color = $scope.searchData.color;
          var url = '/fruits/search';
          if(name !== '') {
            url += '?name=' + name;
          }
          if(color !== '') {
            url += '?color=' + color;
          }

          $http({
            method: "GET",
            url: url
          }).then(function successCallback(response) {
            $scope.fruits = response.data;
          }, function errorCallback(response) {
            console.log(response.statusText);
          });
        };

        function _success(response) {
          $scope.fruits = response.data;
          _clearForm();
        }

        function _error(response) {
          alert(response.data.message || response.statusText);
        }

        //Clear the form
        function _clearForm() {
          $scope.form.name = "";
          $scope.form.color = "";
          $scope.searchData.name = "";
          $scope.searchData.color = "";
        }
      });
    </script>
</head>
<body ng-app="FruitManagement" ng-controller="FruitManagementController">

<div class="container">
    <h1>REST Service - Fruit</h1>

    <h3>Add a fruit</h3>
    <form ng-submit="add()">
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Name" ng-model="form.name" size="60"/></div>
        </div>
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Color" ng-model="form.color" size="60"/></div>
        </div>
        <input type="submit" value="Add"/>
    </form>

    <h3>Search Fruits</h3>
    <form ng-submit="search()">
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Name" ng-model="searchData.name" size="60"/></div>
        </div>
        <div class="row">
            <div class="col-6"><input type="text" placeholder="Color" ng-model="searchData.color" size="60"/></div>
        </div>
        <input type="submit" value="Search"/>
    </form>
    <div class="row">
        <div class="col-4">Name</div>
        <div class="col-8">Color</div>
    </div>
    <div class="row" ng-repeat="fruit in fruits">
        <div class="col-4">{{ fruit.name }}</div>
        <div class="col-8">{{ fruit.color }}</div>
    </div>
</div>

</body>
</html>
